<template>
  <!-- 列表区域 -->
  <div class="card-layout-box">
    <!-- 负责研发任务 -->
    <div class="card-box">
      <!-- 分类 -->
      <div class="card-header-box" style="background:#763838;">
        <p>负责研发任务</p>
      </div>
      <!-- 需求列表 -->
      <div class="card-list-no" v-if="allType1BearUsers.length == 0">暂无数据</div>
      <div class="card-list-box" v-if="allType1BearUsers.length > 0">
        <ul class="card-list">
          <li class="card-list-item" v-for="i in allType1BearUsers" :key="i.ID">
              <div>
                <!-- 任务标题 -->
                <div class="card-list-title" @click="handleRowClick(i.ItemRequirementId)">
                  <el-text class="w-150px mb-2 card-header-title" truncated tag="b">
                    {{ i.ItemRequirementName }}
                  </el-text>
                </div>

                <div class="card-list-small">
                  <div class="card-small">
                    <!-- 技术负责人：requirementAuditName -->
                    <div class="item-status">
                      <span>技术负责人：{{ i.bearBossUserName }}&nbsp;&nbsp;</span>
                    </div>
                    <div class="item-status">
                      <span>项目经理：{{ i.itemRequirementManagerName }}&nbsp;&nbsp;</span>
                    </div>
                  </div>
                </div>

                <!-- 操作 -->
                <div class="operate-box">
                  <el-button v-if="i.bearContent == ''" style="width: 100%;" type="primary"
                    @click="handlewirteClick(i.ID)">填写上线负责内容</el-button>
                </div>
              </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 负责测试任务 -->
    <div class="card-box">
      <!-- 分类 -->
      <div class="card-header-box" style="background:#386e76;">
        负责测试任务
      </div>
      <!-- 需求列表 -->
      <div class="card-list-no" v-if="allType3BearUsers.length == 0">暂无数据</div>
      <div class="card-list-box" v-if="allType3BearUsers.length > 0">
        <ul class="card-list">
          <li class="card-list-item" v-for="i in allType3BearUsers" :key="i.ID">
            <!-- <div class="card-list-item" v-for="i in item.bearList" :key="item.ID"> -->
              <div>
                <!-- 任务标题 -->
                <div @click="handleRowClick(i.ItemRequirementId)">
                  <el-text class="w-150px mb-2 card-header-title" truncated tag="b">
                    {{ i.ItemRequirementName }}
                  </el-text>
                </div>

                <div class="card-list-small">
                  <div class="card-small">
                    <!-- 技术负责人：requirementAuditName -->
                    <div class="item-status">
                      <span>技术负责人：{{ i.bearBossUserName }}&nbsp;&nbsp;</span>
                    </div>
                    <div class="item-status">
                      <span>项目经理：{{ i.itemRequirementManagerName }}&nbsp;&nbsp;</span>
                    </div>
                  </div>
                </div>
                <!-- 操作 -->
                <el-button v-if="i.bearContent == ''" style="width: 100%;" type="primary"
                  @click="handlewirteClick(i.ID)">填写上线负责内容</el-button>
              </div>
            <!-- </div> -->
          </li>
        </ul>
      </div>
    </div>

    <!-- 负责运维任务 -->
    <div class="card-box">
      <!-- 分类 -->
      <div class="card-header-box" style="background:#1e90ff;">
        负责运维任务
      </div>
      <!-- 需求列表 -->
      <div class="card-list-no" v-if="allType2BearUsers.length == 0">暂无数据</div>
      <div class="card-list-box" v-if="allType2BearUsers.length > 0">
        <ul class="card-list">
          <li class="card-list-item" v-for="i in allType2BearUsers" :key="i.ID">
            <!-- <div class="card-list-item" v-for="i in item.bearList" :key="item.ID"> -->
              <div v-if="i.requirementOnlineStatus < 2">
                <!-- 任务标题 -->
                <div @click="handleRowClick(i.ItemRequirementId)">
                  <el-text class="w-150px mb-2 card-header-title" truncated tag="b">
                    {{ i.ItemRequirementName }}
                  </el-text>
                </div>

                <div class="card-list-small">
                  <div class="card-small">
                    <!-- 技术负责人：requirementAuditName -->
                    <div class="item-status">
                      <span>技术负责人：{{ i.bearBossUserName }}&nbsp;&nbsp;</span>
                    </div>
                    <div class="item-status">
                      <span>项目经理：{{ i.itemRequirementManagerName }}&nbsp;&nbsp;</span>
                    </div>
                  </div>
                </div>
                <!-- 操作 -->
                <div class="operate-box">
                  <el-button v-if="i.bearContent == ''" style="width: 100%;" type="primary"
                    @click="handlewirteClick(i.ID)">填写上线负责内容</el-button>
                </div>
              </div>


            <div v-if="i.bearContent != '' && i.mSFilePath ==''">
              <!-- 任务标题 -->
              <div @click="handleRowClick(i.ItemRequirementId)">
                <el-text class="w-150px mb-2 card-header-title" truncated tag="b">
                  {{ i.ItemRequirementName }}
                </el-text>
              </div>

              <div class="card-list-small">
                <div class="card-small">
                  <!-- 技术负责人：requirementAuditName -->
                  <div class="item-status">
                    <span>技术负责人：{{ i.bearBossUserName }}&nbsp;&nbsp;</span>
                  </div>
                  <div class="item-status">
                    <span>项目经理：{{ i.itemRequirementManagerName }}&nbsp;&nbsp;</span>
                  </div>
                </div>
              </div>
              <!-- 操作 -->
              <div class="operate-box">
                <el-button v-if="i.bearContent != '' && i.requirementOnlineStatus == 1" disabled style="width: 100%;"
                  type="warning">等待上线</el-button>
              </div>
              <div class="operate-box">
                <el-button v-if="i.bearContent != '' && i.requirementOnlineStatus == 2 && i.mSFilePath == ''"
                  style="width: 100%;" type="primary" @click="handleDesignClick(i.ID)">上线成功-上传巡检文档</el-button>
              </div>
              <div class="operate-box">
                <el-button v-if="i.bearContent != '' && i.requirementOnlineStatus == 3 && i.mSFilePath == ''"
                  style="width: 100%;" type="danger" @click="handleDesignClick(i.ID)">上线失败-上传巡检文档</el-button>
              </div>
            </div>
            <!-- </div> -->
          </li>
        </ul>
      </div>
    </div>
  </div>



  <!-- 上传巡检文档 -->
  <el-dialog class="dialog-container" 
    style="
      min-height: 400px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;"
      :close-on-click-modal="false"
    v-model="dialogDesignFileVisible"
    title="上传巡检文档" 
    @close="handleCloseDialog" 
    @closed="handleCloseDialog">
    <el-upload class="upload-demo" drag action="" multiple="true" :limit="3" v-model:file-list="designFileText"
      :http-request="handleUpLoad" :on-error="handleError" :on-remove="handleRemove" :on-exceed="handleExceed">
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        拖拽文件或者 <em>点击上传文件</em>
      </div>
    </el-upload>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleCloseDialog">取消</el-button>
        <el-button type="primary" @click="handleDesignFile()">提交</el-button>
      </div>
    </template>
  </el-dialog>





  <!-- 上线评审会议纪要 -->
  <el-dialog v-model="dialogWriteOnlineVisible" :close-on-click-modal="false" title="上线负责内容" width="1000" style="margin-top: 180px;"
    @close="handleColseWriteOnlineDialog" @closed="handleColseWriteOnlineDialog">
    <el-form label-position="right" label-width="160px" v-model="onlineForm">
      <el-input v-model="onlineForm.bearContent" style="width: 900px;margin-bottom: 20px;margin-right: 20px;" :rows="12"
        type="textarea" placeholder="请输入上线负责内容">
      </el-input>
      <el-form-item>
        <!-- <template #footer> -->
        <div class="dialog-footer" style="width: 100%;margin-right: 8%; display: flex;justify-content: right;">
          <el-button type="primary" @click="dingdingWriteOnlineMsgClick()"> 提交 </el-button>
        </div>
        <!-- </template> -->
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 需求详情弹窗 -->
  <el-dialog v-if="dialogInfoVisible" style="width: 1200px;" :close-on-click-modal="false" v-model="dialogInfoVisible"  @close="handleCloseRowDialog" @closed="handleCloseRowDialog">
        <CommonRequirementInfoVue v-if="dialogInfoVisible" :isRequirementID="isRequirementID" :clearData="clearData"></CommonRequirementInfoVue>
    </el-dialog>
</template>

<script setup lang='ts'>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElMessageBox, ElNotification, FormInstance, } from "element-plus";
import { tableTimeDateMsgTow } from "@/utils/utils";
import { useRouter } from "vue-router";
import { postUploadFile } from "@/api/common/index";
import CommonRequirementInfoVue from "../comomRequirementInfo.vue";
import {
  GetMyBareMsg, //获取所有的待填写任务列表
  SubmitBearContent,//提交上线负责内容
  PutSaveMsOnlineEndBearContents,//上传巡检文档
} from "@/api/newDemands/index";
/* 参数 */
let router = useRouter();
const loading = ref(false);

const dialogInfoVisible = ref(false);//查看需求弹窗控件
const clearData = ref(false);//控制是否清空子组件数据
const isRequirementID = ref<any>(null);//当前需求id 
const dialogWriteOnlineVisible = ref(false); //上线评审会议纪要模态框
const dialogDesignFileVisible = ref(false);//控制上传巡检文档控件
const designFilePath = ref("");//巡检文档文件地址
const designFileText = ref([]);//巡检文档文件显示
const allbearUsers = ref<any>([]); // 获取要填写负责内容的上线任务
const allType1BearUsers = ref<any>([]);//研发上线任务
const allType2BearUsers = ref<any>([]);//运维上线任务
const allType3BearUsers = ref<any>([]);//测试上线任务
const onlineForm = ref<any>({
  requirementBearId: null,
  bearContent: null,
  requirementOnlineStatus: null,
}); // 要填写负责内容的上线任务
const onlineDesignForm = ref<any>({
  requirementBearId: null,
  mSFilePath: null,
}); // 上传巡检文档


//  自定义上传文件
const handleUpLoad = async (options: any) => {
  console.log("Options:", options);

  const { data } = await postUploadFile(options.file, "xunjianWorld", "2");
  if (data.code === 200) {
    // 文件地址
    // onlineDesignForm.value.mSFilePath = data.data.resultFilePath;
    designFilePath.value = data.data.resultFilePath;
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }
};

const handleError = (err: any) => {
  ElMessage.error(err);
};

const handleRemove = (file: any) => {
  designFileText.value = [];
  designFilePath.value = "";
};

const handleExceed = (exc: any) => {
  ElMessage.warning("只能上传3个文件！")
};

// 弹出编写上线内容输入框
const handlewirteClick = (id: number) => {
  onlineForm.value.requirementBearId = id;
  dialogWriteOnlineVisible.value = true;
}

// 弹出上传巡检文档弹窗
const handleDesignClick = (id: number) => {
  dialogDesignFileVisible.value = true;
  onlineDesignForm.value.requirementBearId = id;
}


// 上传巡检文档后将文件与需求绑定
const handleDesignFile = async () => {
  dialogDesignFileVisible.value = true;
  console.log("巡检文档", onlineDesignForm.value);
  onlineDesignForm.value.mSFilePath = designFilePath.value;
  // 此处上传巡检文档
  const { data } = await PutSaveMsOnlineEndBearContents(onlineDesignForm.value)
  if (data.code === 200 && data.data !== null) {
    ElMessage.success(data.msg);
    dialogDesignFileVisible.value = false;
    await getAllMyBears();
    loading.value = false;
    return;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
};

// 提交上线负责内容
const dingdingWriteOnlineMsgClick = async () => {
  loading.value = true;
  const { data } = await SubmitBearContent(onlineForm.value)
  if (data.code === 200 && data.data !== null) {
    ElMessage.success(data.msg);
    loading.value = false;
    dialogWriteOnlineVisible.value = false;
    getAllMyBears();
    return;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
}


// 关闭上传弹框
const handleCloseDialog = () => {
  onlineDesignForm.value = {
    requirementBearId: null,
    mSFilePath: null,
  };
  designFileText.value = [];
  designFilePath.value = "";
  dialogDesignFileVisible.value = false;
};

const handleColseWriteOnlineDialog = () => {
  loading.value = false
  dialogWriteOnlineVisible.value = false;
};


// 筛选任务类型的方法
// const changeBearType = (data: any, type: number, option: number) => {
//   switch (option) {
//     case 1: 
//       if(type == 1) {
//         allType1BearUsers.value = allType1BearUsers.value;
//         console.log(isBear1.value, allType1BearUsers.value)
//       };
//       if(type == 2) {
//         allType2BearUsers.value = allType2BearUsers.value;
//       };
//       if(type == 3) {
//         allType3BearUsers.value = allType3BearUsers.value;
//       };
//       break;
//     case 2: 
//       if(type == 1) {
//         allType1BearUsers.value = allType1BearUsers.value.filter((item: any) => item.bearContent == '');
//         console.log(isBear1.value, allType1BearUsers.value)
//       };
//       if(type == 2) {
//         allType2BearUsers.value = allType2BearUsers.value.filter((item: any) => item.bearContent == '');
//       };
//       if(type == 3) {
//         allType3BearUsers.value = allType3BearUsers.value.filter((item: any) => item.bearContent == '');
//       };
//       break;
//     case 2: 
//     if(type == 1) {
//         allType1BearUsers.value = allType1BearUsers.value.filter((item: any) => item.bearContent !== '');
//         console.log(isBear1.value, allType1BearUsers.value)
//       };
//       if(type == 2) {
//         allType2BearUsers.value = allType2BearUsers.value.filter((item: any) => item.bearContent !== '');
//       };
//       if(type == 3) {
//         allType3BearUsers.value = allType3BearUsers.value.filter((item: any) => item.bearContent !== '');
//       };
//       break;
//   }
// };

// TODO 获取所有待上线评审需求
const getAllMyBears = async () => {
  loading.value = true;
  const { data } = await GetMyBareMsg();

  if (data.code === 200 && data.data !== null) {
    // allType1BearUsers.value = data.data.type1;
    // allType2BearUsers.value = data.data.type2;
    // allType3BearUsers.value = data.data.type3;
    allType1BearUsers.value = data.data.type1.filter((item: any) => item.bearContent == '');
    allType2BearUsers.value = data.data.type2.filter((item: any) => item.bearContent == '' || item.requirementOnlineStatus == 2);
    allType3BearUsers.value = data.data.type3.filter((item: any) => item.bearContent == '');

    allbearUsers.value = [ data.data.type1, data.data.type2, data.data.type3];
    console.log("所有任务：", allbearUsers.value[1][1]);
    console.log("研发上线任务：", allType1BearUsers.value);
    console.log("测试上线任务：", allType3BearUsers.value);
    console.log("运维上线任务：", allType2BearUsers.value);
    ElMessage.success(data.msg);
    loading.value = false;
    return;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
};

// TODO  查看需求
const handleRowClick = async (id: number) => {
  console.log("点击触发函数：", id);
  dialogInfoVisible.value = true;
  isRequirementID.value = id;
};

// 关闭查看需求弹窗
const handleCloseRowDialog = () => {
  dialogInfoVisible.value =false;
  clearData.value = true;
};



// 页面初始化调用接口
onMounted(async () => {
  getAllMyBears()
});

</script>

<style lang="scss" scoped>
// 需求列表区域
.card-layout-box {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  // justify-content: flex-start;
  justify-content: space-between;

  // 无数据时显示
  .card-not-requirement {
    color: #909399;
    margin: auto;
  }

  .card-box {
    width: 33%;
    // width: 470px;
    height: 100%;
    // height: 360px;
    border: 1px solid #004ce4;
    border-radius: 10px 10px 10px 10px;
    // margin: 0 5px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;

    // margin: 0 10px 20px 0;
    // 列表标题
    .card-header-box {
      width: 100%;
      height: 40px;
      padding: 0 10px;
      line-height: 40px;
      font-size: 18px;
      font-family: Helvetica, Arial, sans-serif;
      color: white;
      border-radius: 10px 10px 0 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    // 暂无数据
    .card-list-no {
      width: 100%;
      text-align: center;
      margin: auto;
    }

    // 列表盒子
    .card-list-box {
      width: 100%;
      height: calc(100% - 40px);
      display: flex;
      justify-content: start;
      overflow-y: auto;

      .card-list {
        width: 100%;
        height: 100%;
        font-size: 14px;
        overflow-y: auto;

        .card-list-item {
          width: 100%;
          display: flex;
          flex-direction: column;
          border-bottom: 1px solid #ccc;
          cursor: pointer;
          padding: 5px 5px;
          overflow: hidden;
          position: relative;

          // 附加信息样式
          .card-list-small {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            white-space: nowrap;
            padding: 0;
            font-size: 0.7rem;

            .card-small {
              width: 455px;
              display: flex;
              justify-content: space-between;
              flex-direction: row;
            }

            .card-list-small-item {
              margin: 0 10px 0 0;
            }

            .item-status {
              width: 120px;
            }

            .boss-name {
              width: 110px;
            }

            .test-list {
              width: 180px;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .begin-time {
              width: 110px;
            }

            .operate-box {
              width: 180px;
              text-align: right;
            }
          }

          // 操作按钮样式
          .card-list-operate {
            justify-content: flex-end;
            width: 60px;
            position: absolute;
            right: 10px;
            top: 2px;
            opacity: 1;
            z-index: 999;

            .el-col {
              margin: 1px 0;
              text-align: right;
            }
          }
        }

        .card-list-item:hover {
          background-color: rgb(216.8, 235.6, 255);
        }

        .card-header-title {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .card-header-title:hover {
          color: #409EFF;
          cursor: pointer;
        }
      }
    }
  }
}

;

// 审核需求
.record-title {
  display: flex;
  flex-direction: row;
  padding: 5px 10px;
  margin-bottom: 10px;
  background-color: #f0f0f0;
  border-radius: 2px;

  p {
    margin-right: 20px;
  }
}

// 需求草稿
.info-file-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin: 10px 0 0;

  .info-content-title {
    width: 100px;
    padding: 0 10px;
  }

  .info-file-ul {
    width: calc(100% - 70px);
    text-align: left;
    display: flex;
    flex-direction: row;

    .info-file-item {
      width: 100px;
      margin-right: 10px;
      color: blue;
    }

    .info-file-item:hover {
      color: #409EFF;
      cursor: pointer;
    }
  }
}

// TODO 分配需求弹窗
.dialog-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .dialog-form-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 30px;

    .el-form-item {
      margin: 0 10px;
    }
  }

  .dialog-footer {
    text-align: right;
  }
}

// 修改需求弹窗
.again-dialog {
  .create-form {
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .add-icon {
      color: #dcdfe6;
      cursor: pointer;
      margin-left: 5px;
    }

    .add-icon:hover {
      color: #409eff;
    }

    .is-check-role {
      background-color: #409eff;
    }

    .file-box {
      width: 100%;
    }

    .upload-box {
      width: 100%;
      // height: 60px;
      // .el-form-item__content {
      //   align-content: flex-start;
      //   background-color: red;
      // }
    }
  }

  .create-form>*:not(.create-button) {
    order: 1;
  }

  .create-button {
    order: 2;
    margin-left: auto;
    margin-right: 20px;
    margin-top: 20px;
  }
}
</style>
